<template>
  <el-container class="full-height-container">
    <el-header class="header">
      <div class="header-left">
        <img src="@/assets/logo.png" alt="网站图标" class="logo">
        <span class="site-name">桂林市气温预测系统</span>
      </div>
      <div class="header-right">
        <span v-if="username" class="user-name-display">{{ username }}</span>
        <div class="user-avatar" @click="showDropdown =!showDropdown">
          <img src="@/assets/momo.png" alt="用户头像" class="avatar">
          <div v-if="showDropdown" class="user-dropdown">
            <div class="user-info-container">
              <span class="username">{{ username }}</span>
            </div>
            <hr class="separator">
            <div class="dropdown-menu">
              <a href="#" class="menu-item" @click="goToProfile">
                <i class="fa-solid fa-user"></i>
                <span>个人信息</span>
              </a>
              <a href="#" class="menu-item" @click="goToSettings">
                <i class="fa-solid fa-gear"></i>
                <span>系统设置</span>
              </a>
              <a href="#" class="menu-item" @click="logout">
                <i class="fa-solid fa-right-from-bracket"></i>
                <span>退出系统</span>
              </a>
            </div>
          </div>
        </div>
      </div>
    </el-header>
    <el-container class="main-container">
      <el-aside width="200px" class="sidebar">
        <el-menu 
          :default-active="activeMenu" 
          mode="vertical" 
          @select="handleMenuSelect" 
          class="sidebar-menu"
        >
          <el-menu-item index="main">
            <i class="fa-solid fa-house"></i>
            <span>主控面板</span>
          </el-menu-item>
          <el-menu-item index="model-evaluation">
            <i class="fa-solid fa-chart-line"></i>
            <span>模型评估</span>
          </el-menu-item>
          <el-menu-item index="model-training">
            <i class="fa-solid fa-database"></i>
            <span>模型训练</span>
          </el-menu-item>
          <el-menu-item index="database">
            <i class="fa-solid fa-database"></i>
            <span>数据中心</span>
          </el-menu-item>
          
          <el-menu-item index="ai">
            <i class="fa-solid fa-robot"></i>
            <span>AI智能助手</span>
          </el-menu-item>
        </el-menu>
      </el-aside>
      <el-main class="main-content">
        <router-view v-slot="{ Component }">
          <keep-alive :include="['AiPage']">
            <component :is="Component" />
          </keep-alive>
        </router-view>
      </el-main>
    </el-container>
  </el-container>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue';
import { useRouter } from 'vue-router';
import { useAuthStore } from '@/stores/auth';

const router = useRouter();
const authStore = useAuthStore();
const activeMenu = ref('main');
const showDropdown = ref(false);
const username = ref(authStore.userInfo?.username || '');

const handleMenuSelect = (key: string) => {
  switch (key) {
    case 'main':
      router.push('/main');
      break;
    case 'database':
      router.push('/database');
      break;
    case 'model-evaluation':
      router.push('/model-evaluation');
      break;
    case 'model-training':
      router.push('/model-training');
      break;
    case 'ai':
      router.push('/ai-page');
      break;
  }
  activeMenu.value = key;
};

const goToProfile = () => {
  router.push('/user-info');
};

const goToSettings = () => {
  router.push('/settings'); 
};

const logout = () => {
  authStore.logout();
  router.push('/');
};

onMounted(() => {
  const storedUserInfo = authStore.userInfo;
  if (storedUserInfo) {
    username.value = storedUserInfo.username;
  }
});
</script>

<style scoped>
/* 全局容器设置 */
.full-height-container {
  height: 100vh;
  display: flex;
  flex-direction: column;
  background: #fff;
  color: #333;
}

/* 头部样式 */
.header {
  background: #fff;
  border-bottom: 1px solid #dcdfe6;
  color: #333;
  height: 60px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 20px;
  flex-shrink: 0;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12);
}

.header-left {
  display: flex;
  align-items: center;
}

.logo {
  height: 40px;
  margin-right: 20px;
}

.site-name {
  font-size: 20px;
  font-weight: 600;
  color: #333;
}

.header-right {
  display: flex;
  align-items: center;
  margin-right: 10px;
}

.user-name-display {
  margin-right: 20px;
  padding-right: 10px;
  font-size: 14px;
  color: #606266;
}

.user-avatar {
  position: relative;
}

.avatar {
  height: 40px;
  width: 40px;
  border-radius: 50%;
  cursor: pointer;
  border: 1px solid #dcdfe6;
}

.user-dropdown {
  position: absolute;
  top: 45px;
  right: 0;
  background: #fff;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  padding: 10px;
  min-width: 200px;
  z-index: 1000;
}

.user-info-container {
  display: flex;
  justify-content: center;
  margin-bottom: 10px;
}

.username {
  font-size: 14px;
  color: #606266;
}

.separator {
  border: none;
  border-top: 1px solid #dcdfe6;
  margin: 5px 0;
}

.dropdown-menu {
  display: flex;
  flex-direction: column;
}

.menu-item {
  padding: 12px 15px;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.3s;
  color: #606266;
  text-decoration: none;
  display: flex;
  align-items: center;
}

.menu-item i {
  margin-right: 15px;
  font-size: 16px;
}

.menu-item:hover {
  background: #f5f7fa;
  color: #409eff;
}

/* 主内容区域布局 */
.main-container {
  flex: 1;
  display: flex;
  overflow: hidden;
  background: #fff;
}

.sidebar {
  background: #fff;
  color: #333;
  height: 100%;
  overflow-y: auto;
  border-right: 1px solid #dcdfe6;
}

.sidebar-menu {
  border-right: none;
}

.sidebar-menu .el-menu-item {
  display: flex;
  align-items: center;
  padding: 15px 20px;
  transition: all 0.3s;
  color: #303133;
  border-bottom: 1px solid #f0f2f5;
}

.sidebar-menu .el-menu-item i {
  margin-right: 12px;
  font-size: 16px;
  width: 24px;
  text-align: center;
}

.sidebar-menu .el-menu-item span {
  margin-left: 4px;
}

.sidebar-menu .el-menu-item:hover {
  background: #f5f7fa;
  color: #409eff;
}

.sidebar-menu .el-menu-item:last-child {
  border-bottom: none;
}
</style>